<!-- hybrid/html/google-map.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>谷歌地图选点</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdbjmG3M5keeuFLoeaVNRTf_zTS917648&libraries=&v=weekly&result_type=street_address"></script>
  <!-- 必须引入uni-webview SDK -->
  <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>
  <div id="map" style="height: 100vh;"></div>
  <script>
    let map;
    function initMap(lat = 39.90, lng = 116.40) {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: parseFloat(lat), lng: parseFloat(lng) },
        zoom: 14
      });

      // 点击地图获取坐标
      map.addListener('click', async (e) => {
        const geocoder = new google.maps.Geocoder();
        geocoder.geocode({ location: e.latLng }, (results) => {
          // 通过postMessage回传数据
          uni.postMessage({
            data: [{
              address: results[0].formatted_address,
              lat: e.latLng.lat(),
              lng: e.latLng.lng()
            }]
          });
        });
      });
    }

    // 接收uniapp传递的参数
    document.addEventListener('UniAppJSBridgeReady', () => {
      const urlParams = new URLSearchParams(window.location.search);
      initMap(urlParams.get('lat'), urlParams.get('lng'));
    });
  </script>
</body>
</html>
